<link rel="stylesheet" href="{$site.cdn}/static/libs/jquery-ui/jquery-ui.min.css">
<style>
    .fw-initial{
        font-weight: initial !important;
    }
    .card-item {
        padding: .5rem .5rem 0 .5rem;
        position: relative;
    }
    .card-item>*{
        margin-bottom: 5px;
    }
    .card-item .card-img-top {
        height: 120px;
    }
    .card-item .card-img-top img {
        height: 100%;
        object-fit: cover;
    }
    .card-item .card-img-top:hover {
        cursor: pointer;
    }
    .card-item .itemid {
        position: absolute;
        top: 4px;
        right: 4px;
        background-color: #ffffff;
        padding: 3px;
        border-radius: 4px;
    }
    .top{
        border-bottom: 1px #00000015 solid;
        margin-bottom: 1rem;
    }
    .bb-solid{
        border-bottom: 1px #00000008 solid;
    }
    .top h3{
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        display: inline-block;
    }
    .friendlinks .form-group {
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .btn-del-item {
        position: absolute;
        right: 0;
    }
    .custom-control-label {
        vertical-align: sub;
    }
</style>
<form role="form" action="" class="frm-operate" method="post">
    <div class="card card-primary">
        <div class="card-body friendlinks">
<!--            <div class="top">-->
<!--                <a href="javascript:history.back()" class="text-primary">-->
<!--                    <i class="fas fa-reply"></i>-->
<!--                </a>-->
<!--                <h3>{$row.name}-{:lang('Edit')}</h3>-->
<!--            </div>-->
			<div class="form-group row bb-solid">
                <label class="col-sm-2 col-12 col-form-label">{:lang('Type')}: </label>
                <div class="col-sm-8 col-12 type-op">
                    {:build_radios('row[type]',['1'=>lang('Text'),'2'=>lang('Cover')],$row['type'],['class'=>'form-control'])}
                </div>
            </div>
            <div class="form-group row bb-solid">
                <label for="frm-name" class="col-sm-2 col-form-label">{:lang('Title')}: </label>
                <div class="col-sm-4">
                    <input type="text" id="frm-name" class="form-control" name="row[name]" placeholder="{:lang('Enter title')}" value="{$row['name']}" data-rule="required">
                </div>
            </div>
            <div class="form-group row bb-solid">
                <label for="frm-title" class="col-sm-2 col-form-label">{:lang('Url')}: </label>
                <div class="col-sm-4">
                    <input type="text" id="frm-title" class="form-control" name="row[url]" placeholder="{:lang('Enter url')}"  value="{$row['url']}" data-rule="required" >
                </div>
            </div>
			<div class="images-list" {neq name='row.type' value='2'}style="display: none"{/neq}>
				<div class="form-group row">
					<label for="frm-image" class="col-sm-2 col-form-label">{:lang("Cover")}</label>
					<div class="col-sm-8 fileGroup">
						<div class="file-btn">
							<input type="text" class="form-control txt-files" id="frm-image" name="row[image]" value="{$row['image']}" placeholder="{:lang("Cover")}">
							<input type="button"
								   class="btn btn-default ml-1 btn-imgUpload"
								   data-mimetype="image/*"
								   data-multiple="false"
								   data-field="frm-image"
								   value="{:lang('Upload image')}">
							<input type="button"
								   class="btn btn-primary ml-1 btn-imgSelect"
								   data-mimetype="image/jpeg,image/png"
								   data-multiple="false"
								   data-field="frm-image"
								   value="{:lang('Select image')}">
						</div>
						<div class="file-preview row mt-2"></div>
					</div>
				</div>
			</div>
        </div>
        <div class="card-footer">
            <div class="row justify-content-around">
                <div class="col-sm-10">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>
{block:script}
<script>
    require(['admin','jquery-ui','form'], function (undefined, undefined, Form) {
        Form.api.init({
			success:function (data) {
			//window.history.back();
			}
		});

        $(function(){
            
			// 类型选择切换
            $('.type-op').change(function (e) {
                var value = $('.type-op').find('input[type=radio]:checked').val();
                if (value==1) {
                    $('.images-list').hide();
                    //$('.video-list').hide();
                } else if (value==2) {
                    $('.images-list').show();
                    //$('.video-list').show();
                }
            });
			// 删除
            $(document).on('click', '.btn-del-item', function () {
                $(this).parents('.card-item').parent().remove();
            });

        })
    })

</script>
{/block:script}